<!-- 营销 -->
<template>
  <div class="box">
    <div class="header">
      <div>
        <span>拼团状态：</span>
        <el-select
          v-model="value"
          placeholder="全部"
          @change="changeStatus"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <span>商品搜索:</span>
        <input
          v-model="search"
          placeholder="请输入商品名称"
          @input="iptChange"
        >
        <el-button
          icon="el-icon-search"
          circle
          @click="searchItem"
        />
      </div>
    </div>
    <div class="main">
      <el-button
        type="primary"
        class="add"
        @click="$router.push('/basics')"
      >
        添加拼团商品
      </el-button>
      <!-- :cell-style="cellStyle"
        :header-cell-style="rowClass" -->
      <el-table
        
        :default-sort="{ prop: 'date', order: 'descending' }"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="160"
          sortable
        />
        <el-table-column
          label="拼团图片"
          width="150"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.img"
              alt=""
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="拼团名称"
          width="120"
        />
        <el-table-column
          prop="price"
          label="原价"
          width="120"
        />
        <el-table-column
          prop="price"
          label="拼团价"
          width="120"
        />
        <el-table-column
          prop="num"
          label="拼团人数"
          width="120"
        />
        <el-table-column
          prop="num"
          label="参与人数"
          width="120"
        />
        <el-table-column
          prop="num"
          label="成团数量"
          width="120"
        />
        <el-table-column
          prop="num"
          label="限量"
          width="120"
        />
        <el-table-column
          prop="num"
          label="限量剩余"
          width="120"
        />
        <el-table-column
          fixed
          prop="time"
          label="日期"
          width="150"
        />
        <el-table-column
          label="状态"
          width="120"
        >
          <!-- 如果要改每一行的状态就加一个template   slot-scope="scope"-->
          <!-- <template slot-scope="scope"> 
            <el-switch
              v-model="scope.row.value1"
              active-text=""
              name1="商家"
              inactive-text=""
            >
              上架
            </el-switch>
          </template> -->
          <!-- v-model="scope.row.stateFlag===1?true:false" -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.stateFlag"
              active-color="#13ce66"
              inactive-color="#ccc"
            />
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="delItem(scope.row, scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogVisible">
        <!-- <img
          width="100%"
          :src="dialogImageUrl"
          alt=""
        > -->
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="80px"
        >
          <h3 class="text">
            添加数据
          </h3>
          <el-form-item
            label="名称"
            prop="name"
          >
            <el-input
              v-model="form.name"
              placeholder="请输入名称"
            />
          </el-form-item>
          <el-form-item
            label="时间范围"
            prop="time"
          >
            <div
              class="block"
              size="mini"
            >
              <span class="demonstration">起始日期时刻为 12:00:00</span>
              <el-date-picker
                v-model="value"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
              />
            </div>
          </el-form-item>
          <el-form-item label="幻灯片">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i
                slot="default"
                class="el-icon-plus"
              />
              <div
                slot="file"
                slot-scope="{ file }"
              >
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete" />
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="value1"
              active-text="上架"
              name1="商家"
              inactive-text="下架"
            >
              上架
            </el-switch>
          </el-form-item>

          <el-button
            type="primary"
            @click="setaddComment"
          >
            提交
          </el-button>
        </el-form>
      </el-dialog>
      <el-pagination
        :page-size="pageSize"
        layout="total, sizes,prev, pager, next"
        :total="total"
        :current-page="currentpage"
        :page-sizes="[10, 5, 3, 8]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import { apiGroupWork } from "@/api/groupWork.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      getstate: "",
      search: "",
      dialogImageUrl: "",
      state: "",
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "显示",
        },
        {
          value: 0,
          label: "不显示",
        },
      ],
      value: "",
      value1: false,
      tableData: [],
      dialogVisible: false,
      form: {
        name: "",
        id: "",
      },
      option: "",
      isShow: null,
      showDataT: [],
      showDataF: [],
      currentpage: 1, //默认页码数
      pageIndex: 1, //当前页面 这里
      pageSize: 5, //当前页面显示的数据
      total: 0, //总数
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        title: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  // async created() {
  //  if(this.tableData.length===0){
  //   const res=await axios('/getSeckill')
  //   console.log(res)
  //   this.tableData=res.data.data;
  //  }
  // },
  created() {
    this.getGroup();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},

  //方法集合
  methods: {
    //状态选择
    changeStatus(value) {
      // 点击完切换state状态，调用接口就可以了
      this.state = value;
      this.getGroup();
    },
    // 切换状态事件
    inputState(row) {
      console.log(row);
    },
    //表格居中    
    
    delItem(row, index) {
      this.tableData.splice(index, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.getGroup(); //要重新请求一下列表
    },
    addConfig() {
      this.option = "add";
      this.dialogVisible = true;
    },
    async getGroup() {
      const res = await apiGroupWork({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        state: this.state,
      });
      console.log(res, "res");
      this.tableData = res.data;
      this.total = res.total;
    
     
    },
    handleClick(row) {
      this.option = "edit";
      this.dialogVisible = true;
      this.form = { ...row };
      console.log(row, "row");
      console.log(this.form, "formvvv");
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      console.log(val, "val");
      this.getGroup();
    },
    setaddComment() {
      if (this.option === "add") {
        this.tableData.push(this.form);
        console.log(this.form, "form");
        console.log(this.tableData, "ttt");
        this.dialogVisible = false;
      } else if (this.option === "edit") {
        console.log(this.form.id, "form");
        this.tableData.forEach((item) => {
          if (item.id === this.form.id) {
            item.name = this.form.name;
          }
        });
        this.form = {
          name: "",
          id: "",
        };
        this.dialogVisible = false;
      }
    },
    searchItem() {
      this.tableData = this.tableData.filter((item) => {
        console.log(item);
        if (item.name.indexOf(this.search) !== -1) {
          return item;
        }
      });
    },
    iptChange() {
      if (this.search.length === -1) {
        this.getGroup();
      } else {
        this.tableData = this.tableData.filter((item) => {
          console.log(item);
          if (item.name.includes(this.search)) {
            return item;
          }
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
img {
  width: 50px;
  height: 50px;
}

.header {
  display: flex;
}
.header div {
  margin-right: 20px;
}
.add {
  margin: 10px;
}
.header {
  margin-top: 10px;
}
.text {
  border-bottom: 1px solid #ccc;
  padding: 0 10px;
  line-height: 50px;
}
table th,
table td {
  width: 100px;
}
</style>